<template>
  <div class="app-container">
    <div v-for="item in styleList" class="img-div">
      <div :class="item.style">{{item.img}}</div>
    </div>
    <div class="score-div">
      <div class="score-group" v-for="item in scoreList">
        <span style="width: 120px;display: inline-block;">{{item.img}}({{rate[item.index]}}分)</span>
        <el-input-number v-model="item.score" :min="0" :max="maxList[item.index].value" @change="handleChange" />
      </div>
    </div>
    <div class="control-div">
      <span>总财富：{{currentMoney}}分</span>
      <el-button type="primary" @click="handleBegin">开始</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Fruit",
  inheritAttrs: false,
});

const fruitCount = 24;
const initMoney = ref(100);
const currentMoney = ref(100);

const styleList = ref([]);
const scoreList = ref([]);
const maxList = ref([]);

for(let i = 0; i < fruitCount; i++){
  styleList.value[i] = { index: i, style: "fruit-list", img: "fruit" + i };
  scoreList.value[i] = { index: i, score: 0, img: "fruit" + i };
  maxList.value[i] = computed(() => {
    let currentScore = 0;
    for(let key in scoreList.value){
      if (key != i){
        currentScore += scoreList.value[key].score;
      }
    }
    if (initMoney.value > currentScore){
      return initMoney.value - currentScore;
    }
    else {
      return 0;
    }
  });
}

const rate = {
    0: 100,
    1: 100,
    2: 5,
    3: 10,
    4: 1,
    5: 5,
    6: 10,
    7: 40,
    8: 20,
    9: 15,
    10: 50,
    11: 100,
    12: 5,
    13: 10,
    14: 1,
    15: 5,
    16: 10,
    17: 40,
    18: 20,
    19: 15,
    20: 50,
    21: 100,
    22: 5,
    23: 10,
}
// 随机数及概率
const weights = {
  0: 8,
  1: 1,
  2: 5,
  3: 3,
  4: 8,
  5: 4,
  6: 3,
  7: 1,
  8: 2,
  9: 3,
  10: 1,
  11: 1,
  12: 5,
  13: 3,
  14: 8,
  15: 4,
  16: 3,
  17: 1,
  18: 2,
  19: 3,
  20: 1,
  21: 1,
  22: 5,
  23: 3,
};
// 结果
let currentFruit = 0;
function handleBegin(){
  let start = false;
  let currentScore = 0;
  for (let key in scoreList.value) {
    currentScore += scoreList.value[key].score;
    if (scoreList.value[key].score != 0){
      start = true;
    }
  }
  if (!start) return;

  initMoney.value -= currentScore;
  currentMoney.value = initMoney.value;
  let r = weightedRandom(weights);
  // 初始的时间间隔
  let counter = 100;
  let j = 0;
  let rotate = function(){
    if (currentFruit > fruitCount - 1){
      currentFruit = 0;
    }
    for(let key in styleList.value){
      styleList.value[key].style = "fruit-list";
    }
    styleList.value[currentFruit].style = "fruit-list fruit-list-active";
    j++;
    if (j < 4){
      clearInterval(interval);
      counter = 500;
      interval = setInterval(rotate, counter);
    }
    else if (j >= 4 && j <= 48){
      clearInterval(interval);
      counter = 100;
      interval = setInterval(rotate, counter);
    }
    else{
      clearInterval(interval);
      counter += 50;
      if (currentFruit != r){
        interval = setInterval(rotate, counter);
      }
      else{
        // 根据结果计算金额
        // let amount = score["num" + i] * rate[i];
        let amount = scoreList.value[currentFruit].score * rate[currentFruit];
        if (amount > 0){
          ElMessageBox.alert('恭喜，中奖啦，中奖金额：' + amount, '提示', {
            confirmButtonText: 'OK',
            callback: (action: Action) => {
              currentMoney.value += amount;
              initMoney.value = currentMoney.value;
              if (initMoney.value < currentScore){
                for (let key in scoreList.value) {
                  scoreList.value[key].score = 0;
                }
              }
            },
          })
        }
        else{
          ElMessageBox.alert('很遗憾，没有中奖', '提示', {
            confirmButtonText: 'OK',
            callback: (action: Action) => {
              currentMoney.value += amount;
              initMoney.value = currentMoney.value;
              if (initMoney.value < currentScore){
                for (let key in scoreList.value) {
                  scoreList.value[key].score = 0;
                }
              }
            },
          })
        }
      }
    }
    currentFruit++;
  }
  let interval = setInterval(rotate, counter);
}

function weightedRandom(weights) {
  let total = 0;
  for (let weight of Object.values(weights)) {
    total += weight;
  }
  let randomNumber = Math.random() * total;
  for (let num in weights) {
    randomNumber -= weights[num];
    if (randomNumber <= 0) {
      return parseInt(num);
    }
  }
}

function handleChange(currentValue, oldValue){
  currentMoney.value = currentMoney.value - (currentValue - oldValue);
}

onMounted(() => {
  
});

</script>

<style scoped>
  .fruit-list{
    width: 60px;
    height: 60px;
    border: thick solid #0000FF;
  }
  .img-div:nth-child(1){
    position: absolute;
    top: 15px;
    left: 10px;
  }
  .img-div:nth-child(2){
    position: absolute;
    top: 15px;
    left: 80px;
  }
  .img-div:nth-child(3){
    position: absolute;
    top: 15px;
    left: 150px;
  }
  .img-div:nth-child(4){
    position: absolute;
    top: 15px;
    left: 220px;
  }
  .img-div:nth-child(5){
    position: absolute;
    top: 15px;
    left: 290px;
  }
  .img-div:nth-child(6){
    position: absolute;
    top: 15px;
    left: 360px;
  }
  .img-div:nth-child(7){
    position: absolute;
    top: 15px;
    left: 430px;
  }
  .img-div:nth-child(8){
    position: absolute;
    top: 85px;
    left: 430px;
  }
  .img-div:nth-child(9){
    position: absolute;
    top: 155px;
    left: 430px;
  }
  .img-div:nth-child(10){
    position: absolute;
    top: 225px;
    left: 430px;
  }
  .img-div:nth-child(11){
    position: absolute;
    top: 295px;
    left: 430px;
  }
  .img-div:nth-child(12){
    position: absolute;
    top: 365px;
    left: 430px;
  }
  .img-div:nth-child(13){
    position: absolute;
    top: 435px;
    left: 430px;
  }
  .img-div:nth-child(14){
    position: absolute;
    top: 435px;
    left: 360px;
  }
  .img-div:nth-child(15){
    position: absolute;
    top: 435px;
    left: 290px;
  }
  .img-div:nth-child(16){
    position: absolute;
    top: 435px;
    left: 220px;
  }
  .img-div:nth-child(17){
    position: absolute;
    top: 435px;
    left: 150px;
  }
  .img-div:nth-child(18){
    position: absolute;
    top: 435px;
    left: 80px;
  }
  .img-div:nth-child(19){
    position: absolute;
    top: 435px;
    left: 10px;
  }
  .img-div:nth-child(20){
    position: absolute;
    top: 365px;
    left: 10px;
  }
  .img-div:nth-child(21){
    position: absolute;
    top: 295px;
    left: 10px;
  }
  .img-div:nth-child(22){
    position: absolute;
    top: 225px;
    left: 10px;
  }
  .img-div:nth-child(23){
    position: absolute;
    top: 155px;
    left: 10px;
  }
  .img-div:nth-child(24){
    position: absolute;
    top: 85px;
    left: 10px;
  }
  .fruit-list-active{
    border: thick solid #ff0015ad;
  }
  .score-div{
    position: absolute;
    top: 15px;
    left: 520px;
  }
  .score-group{
    float: left;
    margin: 5px 0px 0px 50px;
  }
  .score-group > span{
    padding-right: 5px;
  }
  .control-div{
    position: absolute;
    top: 520px;
    left: 500px;
  }
  .control-div > span{
    padding-right: 5px;
  }
</style>
